<template>
  <main-card-admin title="算法仓库" :tabs="getTabs()">
    <template #screen-space>
      <div class="h-60 filter-area" :class="[flag ? '' : 'empty-bottom']">
        <!-- 筛选栏 -->
        <div>
          <a-cascader
            v-model:value="algorithmIdCascader"
            :options="algorithmldOptions"
            style="width: 230px"
            :dropdown-style="{ width: '230px', overflow: 'hidden' }"
            :allow-clear="false"
            class="my-cascder"
            :field-names="{ label: 'name', value: 'id' }"
            @change="handleAlgorithmChange"
          />

          <a-divider type="vertical" style="height: 20px" />
          <a-input v-model:value="pageForm.userTel" v-trim class="mr-8" style="width: 180px" placeholder="请输入用户账号">
            <template #prefix> <i class="iconfont icon-search-line"></i> </template>
          </a-input>
          <a-input v-model:value="pageForm.appNum" v-trim style="width: 180px" placeholder="请输入应用编号">
            <template #prefix> <i class="iconfont icon-search-line"></i> </template>
          </a-input>
          <a-divider type="vertical" style="height: 20px" />

          <a-range-picker
            v-model:value="rangeValue"
            style="width: 216px; height: 36px"
            value-format="YYYY-MM-DD"
            :allow-clear="false"
            @change="onRangeChange"
          />
        </div>

        <div class="tools-btn">
          <div class="m-16">
            <sync-outlined style="width: 14px; height: 14px; color: rgba(17, 22, 31, 0.52)" />
            <span class="reset" @click="reset">重置</span>
          </div>
          <a-button type="primary" @click="search()">查询</a-button>
        </div>
      </div>
    </template>

    <!-- 数据内容 -->
    <div style="display: flex">
      <div class="tab-left">
        <div
          v-for="(item, index) in tabList"
          :key="index"
          class="tab-item"
          :class="[tabItem === item.name ? 'active-item' : '']"
          @click="watchTab(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 趋势统计 -->
      <trendStatistics v-if="tabItem === '趋势统计'" ref="trendStatisticsRef" :page-form="pageForm" />
      <!-- IP列表 -->
      <i-p-list
        v-if="tabItem === 'IP列表' && showChild"
        ref="IPListRef"
        :page-form="pageForm"
        :sort-info="sortInfo"
        @tableChange="IPTableChange"
      />
    </div>
  </main-card-admin>
</template>

<script lang="ts" setup>
  import { SyncOutlined } from '@ant-design/icons-vue'
  import dayjs from 'dayjs'
  import { dateFormat } from 'g6-fn'
  import { nextTick, onMounted, ref } from 'vue'

  import { algoDepotApi } from '@/services/api/admin'

  import IPList from '../components/IP-List.vue'
  import trendStatistics from '../components/trend-statistics.vue'
  import { getTabs } from '../utils'

  const flag = ref<boolean>(true)
  // 时间
  const FIFTH_DAY = 14 * 24 * 60 * 60 * 1000 // 15天的毫秒数
  const rangeValue = ref<any>([dayjs(Date.now() - FIFTH_DAY), dayjs(Date.now())])
  const sortInfo = ref<Record<string, string>>()

  // 算法版本级联
  const algorithmIdCascader = ref<string[]>([''])
  const pageForm = ref<Record<string, string | number | undefined | [string, string]>>({
    algorithmId: '',
    versionId: '',
    userTel: '',
    appNum: '',
    callTimeStart: dateFormat(rangeValue.value[0], 'YYYY-MM-DD 00:00:00'),
    callTimeEnd: dateFormat(rangeValue.value[1], 'YYYY-MM-DD 23:59:59')
  })

  const algorithmldOptions = ref<Record<string, any>[]>([{ name: '全部算法服务', id: '' }])

  const appldOptions = ref<Record<string, string | number>[]>([{ name: '全部应用', id: '' }])

  // 获取算法、版本号级联
  const getAlVersionList = async (): Promise<void> => {
    // 获取算法
    const { data } = await algoDepotApi.getAlVersionList()
    algorithmldOptions.value = [
      ...algorithmldOptions.value,
      ...data.map((item: any) => ({ name: item.name, id: item.id, children: item.childList }))
    ]
  }

  // 获取应用列表
  const getAppList = async (): Promise<void> => {
    // 获取算法
    const { data } = await algoDepotApi.getAppList()
    appldOptions.value = [...appldOptions.value, ...data.map((item: any) => ({ name: item.name, id: item.id }))]
  }

  /**
   * ------------------筛选区---------
   */
  // 级联处理
  const handleAlgorithmChange = (e: any) => {
    if (e[0]) {
      pageForm.value.algorithmId = e[0]
      pageForm.value.versionId = e[1]
    } else {
      pageForm.value.algorithmId = ''
      pageForm.value.versionId = ''
    }
  }
  // 时间处理
  const onRangeChange = (e: any) => {
    if (e) {
      pageForm.value.callTimeStart = dateFormat(e[0], 'YYYY-MM-DD 00:00:00')
      pageForm.value.callTimeEnd = dateFormat(e[1], 'YYYY-MM-DD 23:59:59')
    }
  }

  // 调用子组件查询接口方法
  const trendStatisticsRef = ref()
  const IPListRef = ref()

  // 重置
  const showChild = ref<boolean>(false)
  const reset = (): void => {
    rangeValue.value = [dayjs(Date.now() - FIFTH_DAY), dayjs(Date.now())]
    pageForm.value = {
      algorithmId: '',
      versionId: '',
      appNum: '',
      userTel: '',
      columns: '',
      callTimeStart: dateFormat(rangeValue.value[0], 'YYYY-MM-DD 00:00:00'),
      callTimeEnd: dateFormat(rangeValue.value[1], 'YYYY-MM-DD 23:59:59')
    }
    algorithmIdCascader.value = ['']
    if (tabItem.value === '趋势统计') {
      trendStatisticsRef?.value.search(pageForm.value)
    }
    if (tabItem.value === 'IP列表') {
      showChild.value = false
      nextTick(() => {
        showChild.value = true
        IPListRef?.value.getIPListData(pageForm.value)
      })
    }
  }
  // 左侧切换tab
  const tabList = ref<Record<string, string>[]>([
    {
      name: '趋势统计'
    },
    {
      name: 'IP列表'
    }
  ])
  const tabItem = ref<string>('趋势统计')
  // 监听切换时获取数据
  // 查询
  const search = (): void => {
    if (tabItem.value === '趋势统计') {
      showChild.value = false
      trendStatisticsRef?.value.search(pageForm.value)
    }
    if (tabItem.value === 'IP列表') {
      showChild.value = true
      IPListRef?.value.getIPListData(pageForm.value)
    }
  }
  const watchTab = async (item: any) => {
    tabItem.value = item.name
    search()
  }

  // 表格筛选排序
  const IPTableChange = (data: any) => {
    pageForm.value.columns = data.columns
    pageForm.value.order = data.order
  }
  onMounted(() => {
    getAlVersionList()
    getAppList()
    search()
  })
</script>
<!-- <style>
  .ant-cascader-menu-item-content {
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    /* width: 100px !important; */
  }
</style> -->
<style lang="less" scoped>
  .empty-bottom {
    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 1px; /* 下边框的高度 */
      background-color: @border1; /* 下边框的颜色 */
      content: '';
    }
  }

  .filter-area {
    display: flex;
    justify-content: space-between;
  }

  .tools-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .reset {
      margin: 0 8px;
      font-size: 14px;
      color: rgba(17, 22, 31, 0.52);
      cursor: pointer;
    }
  }

  .tab-left {
    padding: 24px;
    margin-right: 30px;
    width: 188px;
    height: 656px;
    background: @background2;
    border-radius: 6px;

    .tab-item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 6px 32px;
      margin-bottom: 32px;
      height: 44px;
      font-size: 18px;
      color: @text03;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 700;
    }

    .active-item {
      color: rgba(16, 16, 20, 0.95);
      background: rgba(0, 0, 0, 0.1);
      font-style: normal;
    }
  }
</style>
